<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            input {
                display: block;
                padding: 0 20px;
                font-size: 20px;
                margin: 50px auto;
            }

            .news{
                width: 600px;
                margin: 0px auto;
                font-size: 30px;
                padding: 10px 20px;
                color: gold;
                height: 30px;
            }
        </style>
    </head>
    <body>
        <input type="text" placeholder="" />

        <script>
            function debounce(func, wait) {
                var context = null;
                var arg = null;
                var timeout = null;
                return function () {
                    context = this;
                    arg = arguments;
                    if (timeout) {
                        window.clearTimeout(timeout);
                    }

                    timeout = window.setTimeout(function () {
                        func.apply(context, arg);
                    }, wait);
                };
            }

            var input = document.querySelector("input");
            input.onkeyup = debounce(function (e) {
                if (this.value == "") {
                    return;
                }
                var newMessage = document.createElement("div");
                newMessage.className = "news";
                newMessage.innerText = this.value;
                document.body.appendChild(newMessage);
            }, 300);
        </script>
    </body>
</html>
